<template>
  <div class="avatar-container">
    <div class="avatar-wrapper" @click="openAvatar">
      <img
        :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar"
        class="user-avatar"
      />
    </div>
    <!-- 弹出层 -->
    <div v-if="isShowAvatarCard" class="nav-el-card">
      <div
        class="el-card-header"
        :style="'background:url('+avatarBackground+');background-size: 100%;'"
      >
        <div class="avatar-wrapper tips">
          <img
            :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar"
            class="user-avatar"
          />
        </div>
        <div class="user-msg">
          <div class="user-name">{{ user.nickname || user.realName||user.username }}</div>
          <div class="user-center">罗慕健康中心</div>
        </div>
        <div class="background-bg"></div>
      </div>
      <div class="el-card-body">
        <div class="setting-btns">
          <div class="btns">
            <svg-icon class-name="search-icon" icon-class="icon-personal-default"></svg-icon>
            <br />个人资料
          </div>
          <div class="btns">
            <svg-icon class-name="search-icon" icon-class="icon-password-default"></svg-icon>
            <br />修改密码
          </div>
          <div class="btns">
            <svg-icon class-name="search-icon" icon-class="icon-clinic-default"></svg-icon>
            <br />切换诊所
          </div>
        </div>
        <div class="setting-logout">
          <el-button round @click="open">注销登录</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="个人信息" :visible.sync="dialogVisible" width="30%">
      <user :user.sync="user"></user>
    </el-dialog>
  </div>
</template>

<script>
import Avatarpng from '@/assets/images/avatar.png';
import avatarBackground from '@/assets/images/avatar-background.svg';
import { mapGetters } from 'vuex';
import user from './user';
export default {
  components: { user },
  data() {
    return {
      levelList: null,
      Avatar: Avatarpng,
      avatarBackground: avatarBackground,
      isShowAvatarCard: false,
      dialogVisible: false
    };
  },
  computed: {
    ...mapGetters(['user'])
  },
  mounted() {
    var sef = this;
    function avatarClick(e) {
      if (sef.isShowAvatarCard) {
        var flag = false;
        e.path.map(res => {
          if (res.className === 'avatar-container') {
            flag = true;
          }
        });
        sef.isShowAvatarCard = flag;
      }
    }
    document.removeEventListener('click', avatarClick);
    document.addEventListener('click', avatarClick);
  },
  methods: {
    openAvatar(e) {
      this.isShowAvatarCard = true;
      e.stopPropagation();
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar');
    },
    open() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout();
      });
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.avatar-container {
  // margin-right: 30px;
  position: relative;
  // 弹出人员窗口信息
  .nav-el-card {
    position: fixed;
    right: 100px;
    width: 324px;
    background: #ffffff;
    border-radius: 10px;
    z-index: 1003;
    border: 1px solid #f2f2f2;
    .el-card-header {
      // border-radius: 10px 10px 0 0;
      height: 72px;
      padding: 12px 0 0 15px;
      .tips {
        display: inline-block;
      }
      .user-msg {
        display: inline-block;
        .user-name {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 22px;
          color: #333333;
        }
        .user-center {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 22px;
          color: #999999;
        }
      }
      // .background-bg {
      //   width: 68px;
      //   height: 45px;
      //   background: linear-gradient(180deg, #d8e4f6 0%, #a0bae1 100%);
      //   opacity: 1;
      // }
    }
    .el-card-body {
      border-radius: 0 0 5px 5px;
      padding: 20px;

      .setting-btns {
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 10px;
        .btns {
          display: inline-block;
          text-align: center;
          margin-left: 20px;
          .search-icon {
            width: 32px;
            height: 32px;
          }
        }
      }
      .setting-logout {
        padding-top: 18px;
        text-align: center;
      }
    }
  }
  .avatar-wrapper {
    margin-top: 5px;
    position: relative;

    .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }

    .el-icon-caret-bottom {
      cursor: pointer;
      position: absolute;
      right: -20px;
      top: 25px;
      font-size: 12px;
    }
  }
}
</style>
